<template>
  <div class="container">
    <div class="swiper" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="content">
            <h1>
              Wellcome to Dolly!
            </h1>
            <div class="top">
              <div></div>
              <div></div>
              <div></div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="form-container">
            <div>
              <h2>{{ state ? 'Login' : 'register' }}</h2>
              <el-form :model="formData">
                <el-form-item>
                  <el-input prefix-icon="el-icon-user" v-model="formData.userName" autocomplete='off'></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input prefix-icon="el-icon-lock" show-password v-model="formData.password" type="password"
                            autocomplete='off'></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="clickHandle">{{ state ? '登录' : '注册' }}</el-button>
                </el-form-item>
              </el-form>
              <div>
                {{ state ? '还没有账号？' : '已有账号？' }}<span @click="state=!state" >{{
                  state ? '注册' : '登录'
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import axios from 'axios'

export default {
  data() {
    return {
      state: true,
      formData: {
        userName: '',
        password: '',
      },
      userList: [
        {userName: 'admin', password: 'admin'}
      ]
    }
  },
  mounted() {
    new Swiper(this.$refs.swiper, {
      direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
    })
    let localData = JSON.parse(localStorage.getItem('userList'))
    if (localData) this.userList = [...this.userList, ...localData]
  },
  methods: {
    clickHandle() {
      //todo: change this
      // this.$router.push('/home')
      // this.$router.push('/home')
      if (!(Object.values(this.formData).every(v => v))) {
        let msg = (this.state ? '登录' : '注册') + '信息不能为空'
        this.$message.error(msg)
      }
      if (this.state) {
        console.log(this.formData.userName);
        console.log(this.formData.password);
        // let loginState = this.userList.some(v => v.userName == this.formData.userName && v.password == this.formData.password)
        // console.log(this.userList.some(v=>{
        //     if(v.userName == this.formData.userName && v.password == this.formData.password) return v
        // }))
        axios({
          method: 'post',
          url: 'http://localhost:5000/usr/login',
          params: {
            usr_account: this.formData.userName,
            usr_passwd: this.formData.password
          }
        }).then(res => {
          console.log(res)
          if (res.data.user_id[0] == null) {
            this.$message.error('登陆失败,用户名或密码错误')
            return
          }
          localStorage.clear()
          localStorage.setItem('user_id', res.data.user_id[0])
          let baseInfo=res.data.base_info;
          localStorage.setItem('email', baseInfo.email)
          localStorage.setItem('phone', baseInfo.phone)
          localStorage.setItem('nickname', baseInfo.nickname)
          localStorage.setItem('avator', baseInfo.avator)
          localStorage.setItem('cost', baseInfo.cost)
          localStorage.setItem('rate', baseInfo.rate)
          localStorage.setItem('risk', baseInfo.risk)
          localStorage.setItem('time', baseInfo.time)
          //提示登陆成功
          this.$message.success('登陆成功')
          //跳转到首页
          this.$router.push('/home')
          console.log(res)
        }).catch(err => {
          console.log(err)
          //提示登陆失败
          //todo:change this
          this.$message.error('登陆失败,用户名或密码错误')
        })

      } else {
        let regState = this.userList.every(v => v.userName !== this.formData.userName && v.password !== this.formData.password)
        this.$router.push('/register')

        // if (regState) {
        //   this.$router.push('/register')
        // this.userList.push(this.formData)
        // localStorage.setItem('userList', JSON.stringify(this.userList))
        // this.$message.success('注册成功')
        // } else {
        // this.$message.error('账号名重复')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
}

.swiper {
  width: 100%;
  height: 100vh;
}

.content {
  min-height: 100Vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

h1 {
  font-family: "Gabriola";
  font-style: italic;
  font-size: 48px;
  color: #000;
  font-weight: normal;
}

.top {
  position: relative;
}

.top div {
  position: absolute;
  left: -20px;
  height: 70px;
  width: 70px;
  border: 2px solid #fff;
  transform: rotate(45deg);
  border-bottom: 0;
  border-right: 0;

}

.top :first-child {
  top: 30px;
}

.top :nth-child(2) {
  top: 60px;
}

.top :nth-child(3) {
  top: 90px;
}

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/images/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

  & > div {
    background-color: rgba(0, 0, 0, .2);
    padding: 50px;
    color: #fff;

    h2 {
      margin-bottom: 15px;
    }

    ::v-deep .el-input__inner {
      border: 0;
      color: #fff;
      background-color: transparent !important;
      border-bottom: 2px solid #fff;
      border-radius: 0;

      input {
        box-shadow: inset 0 0 0 1000px white !important;
      }
    }

    //::deep input:-internal-autofill-selected {
    //  box-shadow: inset 0 0 0 1000px #281840 !important; // 改变了背景色
    //  -webkit-text-fill-color: #c0aefa; // 改变了字体颜色
    //}

    .el-button {
      width: 150px;
      height: 20px;
      line-height: 0px;
      border-radius: 15px;
      border-color: transparent;
      background-image: linear-gradient(to right, #b5b4e7, #e58c9c);;
    }

  }
}
</style>